<template>
  <view :class="[`${prefixCls}-forgot-password-container`]">
    <uv-form ref="uvForm" labelPosition="left" :model="formData" :rules="rules" labelWidth="80px" :errorType="errorType">
      <uv-form-item label="手机号：" prop="mobile" borderBottom>
        <uv-input v-model="formData.mobile" type="number" maxlength="11" border="none" placeholder="请输入手机号" />
      </uv-form-item>

      <uv-form-item label="图形验证码：" prop="imgverify" borderBottom labelWidth="100">
        <uv-input v-model="formData.imgverify" type="number" maxlength="6" border="none" placeholder="请输入验证码" />
        <template #right>
          <uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" width="80px" height="32px" @click="getVerifyCode"></uv-image>
        </template>
      </uv-form-item>

      <uv-form-item label="短信验证码：" prop="smsverify" borderBottom labelWidth="100">
        <uv-input v-model="formData.smsverify" type="number" maxlength="6" border="none" placeholder="请输入验证码" />
        <template #right>
          <cu-verify-code type="success" :mobile="formData.mobile"></cu-verify-code>
        </template>
      </uv-form-item>
      <uv-button type="primary" class="login-button" @click="onSubmit">确 认</uv-button>
    </uv-form>

    <view class="login-operate">
      <uv-text type="primary" size="14px" :text="AuthTypeEnum.ACCOUNT.name" @click="switchAuthType(AuthTypeEnum.ACCOUNT.type)" />
    </view>
  </view>
</template>

<script>
import { AuthTypeEnum } from '@/common/enums/userEnum'
import FormValidate from '@/common/validate/form'

const rules = {
  mobile: FormValidate.mobile,
  imgverify: FormValidate.imgcode,
  smsverify: FormValidate.smscode,
}
/**
 * props
 * @description
 * @property {Object} errorType 自定义样式
 * @property {String} errorType: message:输入框下方 | toast:弹出 | border-bottom: 作用域底部的下划线显示为红色 | none:不会进行任何提示
 */
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'cuForgotPassword',
  mixins: [],
  props: {
    errorType: {
      type: [String],
      default: 'toast',
    },
  },
  data() {
    return {
      AuthTypeEnum,
      rules,
      formData: {
        mobile: '',
        imgverify: '',
        smsverify: '',
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions('modal', ['SetAuthType']),

    onSubmit() {
      this.$refs.uvForm
        .validate()
        .then((res) => {})
        .catch((errors) => {})
    },

    //
    switchAuthType(e) {
      this.SetAuthType(e)
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('forgot-password-container')} {
  position: relative;
  padding: 80rpx 30rpx;
  .login-button {
    margin-top: 60rpx;
  }

  .login-operate {
    @include flex;
    justify-content: space-between;
    margin-top: 20rpx;
    .uv-text {
      width: auto;
      flex: none;
    }
  }
}
</style>
